<template>
<div class="mine-gradient-item box-shadow_2">
    <div class="container">
        <div class="top"
            :style="itemData.gradient">
            <div class="copy">
                <Copy
                    title="CSS"
                    :content="itemData.gradient">
                </Copy>
            </div>
        </div>
        <div class="remove" @click.stop="onRemove">
            <Remove></Remove>
        </div>
        <div class="type">
            <i :class="itemData.id?'el-icon-star-on':''"></i>
        </div>
        <div class="link" v-if="itemData.id" @click="goInfo">
            <i class="el-icon-top-right"></i>
        </div>
    </div>
    <ColorList
        :colors_data="itemData.gradient">
    </ColorList>
</div>
</template>

<script>
import Copy from '@/components/other/Copy';
import ColorList from '@/components/other/ColorList';
import Remove from '@/components/other/Remove';
export default {
    name: 'MineGradientItem',
    components: {Remove,Copy,ColorList},
    props:{
        itemData:{ //对象数据
            type:Object,
            default:()=>{
                return {};
            },
        },
    },
    data(){
        return{};
    },
    methods:{
        goInfo(){
            if(!this.itemData.id) return;
            this.$router.push("/gradient/"+this.itemData.id).catch(() => {return;});
        },
        onRemove(){
            if(this.itemData.id){  //表示这是like的
                this.$store.commit('deleteMyLike',{
                    gradient:this.itemData.id,
                }); //删除一个我的like
            }else{  //表示这是创作的
                this.$store.commit('deleteMyCreate',{
                    gradient:this.itemData,
                }); //删除一个我的创作
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.mine-gradient-item{
    width: 210px;
    margin: 0px 10px 20px 10px;
    border: none;
    background-color: white;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 10px;
    >.container{
        overflow: hidden;
        position: relative;
        i{
            font-weight: bold;
        }
        >.top{
            width: 100%;
            position: relative;
            height: 180px;
            border-radius: 5px;
            >.copy{
                width: fit-content;
                position: absolute;
                bottom: 5px;
                left: 5px;
                opacity: 0;
                transition: all 0.2s;
                /deep/.Copy{
                    border-radius: 3px;
                    font-size: 1.3rem;
                }
            }
            &:hover{
                >.copy{
                    opacity: 1;
                }
            }
        }
        >.remove{
            position: absolute;
            top: 5px;
            right: 5px;
            opacity: 0;
            transition: all 0.2s;
        }
        &:hover{
            >.remove{
                opacity: 1;
            }
        }
        >.type{
            position: absolute;
            top: 5px;
            left: 5px;
            color: #3a3a59;
            font-size: 1.3rem;
            line-height: 1.3rem;
            padding: 3px;
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        >.link{
            position: absolute;
            top: 5px;
            left: 28px;
            color: #3a3a59;
            font-size: 1.4rem;
            line-height: 1.4rem;
            padding: 3px;
            width: 20px;
            height: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    }
    
}
</style>

